<template>
    <vue-seamless-scroll
        :data="obj.imgTextBox"
        :class-option="optionLeft"
        class="seamless-warp2"
        :style="{
            height: floatLeft=='left'?30+'px':(30*4)+'px',
            width: floatLeft=='left'?'100%': obj.width+'px'}">
        <ul
            class="item clearfix"
            :style="{
                width: objWidth,
                minHeight: objHeight}"
        >
            <li
                :style="{
                    width: obj.width+'px',
                    padding: obj.padding+'px',
                    float: floatLeft}"
                v-for="(item, index) in obj.imgTextBox"
                :key="index"
                v-html="item.title"/>
        </ul>
    </vue-seamless-scroll>
</template>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
export default {
    name: 'SeamImgScroll',
    components: {
        VueSeamlessScroll
    },
    props: {
        obj: {
            type: Object
        }
    },
    data() {
        return {

        }
    },
    computed: {
        optionLeft() {
            return this.obj.classOptions
        },
        floatLeft() {
            if (this.obj.classOptions.direction == 2 || this.obj.classOptions.direction == 3) {
                return 'left'
            } else {
                return 'none'
            }
        },
        objHeight() {
            if (this.obj.classOptions.direction == 2 || this.obj.classOptions.direction == 3) {
                return 30 + 'px'
            } else {
                return (30 * this.obj.imgTextBox.length) + 'px'
            }
        },
        objWidth() {
            if (this.obj.classOptions.direction == 2 || this.obj.classOptions.direction == 3) {
                return (this.obj.width * this.obj.imgTextBox.length) + 'px'
            } else {
                return this.obj.width + 'px'
            }
        }
    }
}
</script>
